<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto"
    style="border:1px solid white;width: 100%;" label-position="top">
    <el-row class="demo-autocomplete" :gutter="100">
      <el-col :span="12">
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>基本信息</h3>
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title" type="text" style="width: 100%" maxlength="50" placeholder="请输入标题"
            aria-required="true" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="ruleForm.author" style="width: 100%" maxlength="10" placeholder="请输入作者" show-word-limit
            type="text" clearable />
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input v-model="ruleForm.description" type="textarea" style="width: 100%" maxlength="200"
            placeholder="请输入简介" rows="3" show-word-limit clearable />
        </el-form-item>        
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>其他信息</h3>
        <el-row>
          <el-col :span="10">
            <el-form-item label="语言" prop="language">
              <el-radio-group v-model="language">
                <el-radio-button label="中文" value="CN" />
                <el-radio-button label="英文" value="EN" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="设备类型" prop="deviceType">
              <el-radio-group v-model="deviceType">
                <el-radio-button label="IEQ" value="IEQ" />
                <el-radio-button label="PMS" value="PMS" />
                <el-radio-button label="OPT" value="OPT" />
                <el-radio-button label="ROBOT" value="ROBOT" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="首页推荐" prop="recommend">
              <el-radio-group v-model="recommend">
                <el-radio-button label="是" value="0" />
                <el-radio-button label="否" value="1" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布状态" prop="state">
              <el-radio-group v-model="state">
                <el-radio-button label="草稿" value="DRAFT" />
                <el-radio-button label="已发布" value="PUBLISHED" />
                <el-radio-button label="已下线" value="OFFLINE" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="12">
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>SEO设置</h3>
        <el-form-item label="Title" prop="seo_title">
          <el-input v-model="ruleForm.seo_title" style="width: 100%" maxlength="50" placeholder="请输入SEO标题"
            show-word-limit type="text" clearable />
        </el-form-item>
        <el-form-item label="Keyword" prop="seo_keyword">
          <el-input v-model="ruleForm.seo_keyword" style="width: 100%" maxlength="50"
            placeholder="请输入SEO关键字，多个关键字中间英文逗号分隔" show-word-limit type="text" clearable />
        </el-form-item>
        <el-form-item label="Description" prop="seo_description">
          <el-input v-model="ruleForm.seo_description" type="textarea" style="width: 100%" maxlength="200"
            placeholder="请输入SEO描述" rows="3" show-word-limit clearable />
        </el-form-item>
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>产品图片</h3>
        <el-form-item label="" prop="imageKeys">
          <el-upload class="upload-demo" drag multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png 图片大小不能超过500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>文本编辑</h3>
        <el-form-item label="" prop="content">
          <el-input v-model="ruleForm.content" type="textarea" style="width: 1000px" maxlength="50" placeholder="请输入内容"
            rows="8" show-word-limit clearable />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <h3 style="font-weight: bold;line-height: 50px;"><i class="info"></i>说明书列表</h3>
        <el-form-item>
          <el-upload v-model:file-list="fileList">
            <el-button type="primary">上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                docx/pdf 文件大小不能超过 50MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules, UploadProps } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'

const language = ref('CN');
const deviceType = ref('IEQ');
const recommend = ref('0');
const state = ref('DRAFT');

interface RuleForm {
  title: string
  description: string
  author: string
  content: string
  seo_title: string
  seo_keyword: string
  seo_description: string
}

const formSize = ref<ComponentSize>('default')

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<RuleForm>({
  title: '',
  description: '',
  author: '',
  content: '',
  seo_title: '',
  seo_keyword: '',
  seo_description: '',
})

const rules = reactive<FormRules<RuleForm>>({
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入简介', trigger: 'blur' },
  ],
  author: [
    { required: true, message: '请输入作者', trigger: 'blur' },
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' },
  ],
  seo_title: [
    { required: true, message: '请输入SEO标题', trigger: 'blur' }
  ],
  seo_keyword: [
    { required: true, message: '请输入SEO关键词', trigger: 'blur' }
  ],
  seo_description: [
    { required: true, message: '请输入SEO描述', trigger: 'blur' },
  ],
})

const fileList = ref<UploadUserFile[]>([
  {
    name: '建筑监测说明书.pdf',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: '室内环境说明书.pdf',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.info {
  display: inline-block;
  margin-right: 10px;
  height: 16px;
  width: 4px;
  border-radius: 2px;
  background-color: #ff7d00;
}
</style>
